<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  <title>注册</title>
  <link rel="stylesheet" type="text/css" href="../css/api.css" />
  <link rel="stylesheet" type="text/css" href="../css/register.css" />
</head>

<body>
  <div id="app" v-cloak>
    <div class="wrap flex-wrap flex-vertical">
      <header id="header">
        <div class="header-wrap">
          <div @click="goback" class="header-left">
            <i class="iconfont icon-pre"></i>
          </div>
          <div class="header-title">注册</div>
        </div>
      </header>
      <div id="main" class="flex-con">
        <div class="form-wrap">
          <div class="form-item flex-wrap">
            <i class="iconfont icon-shouji"></i>
            <input v-model="mobile" class="flex-con" type="tel" maxlength="11" placeholder="请输入手机号码">
          </div>
          <div class="form-item flex-wrap">
            <i class="iconfont icon-mima"></i>
            <input v-model="password" class="flex-con" type="password" placeholder="请输入密码">
          </div>
          <div class="form-item flex-wrap">
            <i class="iconfont icon-yanzhengma"></i>
            <input v-model="code" class="flex-con" type="text" placeholder="请输入验证码">
            <button :disabled="disabled" @click="sendSMS" :class="['sendMessage-btn', disabled ? 'disabled' : '']" type="button"
              class="">{{verifyCodeBtnText}}</button>
          </div>
          <div v-if="show_invit_code" class="form-item flex-wrap">
            <i class="iconfont icon-yanzhengma"></i>
            <input v-model="invit_code" class="flex-con" type="tel" placeholder="请输入邀请码（选填）">
          </div>
          <div class="btn-wrap">
            <button @click="register" id="submit-btn" type="button" :disabled="isDisabled" :class="[!isDisabled ? 'btn-active' : 'btn']">提交</button>
          </div>
        </div>
        <!-- <div class="forget-wrap">
          <a @click="goLogin" class="register-link" href="javascript:;">已有账号，去登录</a>
        </div> -->
        <div class="agreement-wrap">
          <span>注册或登录即代表你同意</span>
          <strong @click="openProtocol">《用户协议》</strong>
        </div>
      </div>
    </div>
  </div>
</body>

</html>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/vue.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript">
  var app;
  apiready = function () {
    $api.fixStatusBar($api.dom('#header'));
    api.setStatusBarStyle({
      style: 'light',
    });
    app = new Vue({
      el: '#app',
      data: {
        mobile: '',
        password: '',
        code: '',
        disabled: false,
        verifyCodeBtnText: '获取验证码',
        isDisabled: true,
        show_invit_code: false,
        invit_code: '',
      },
      created: function () {
        var _this = this
        if (!!$api.getStorage('uid')) {
          api.openWin({
            name: 'main',
            url: 'main.html',
            slidBackEnabled: false
          });
        }
        if ($api.getStorage('tuid') == '0') {
          _this.show_invit_code = true;
        }
        if (!$api.getStorage('deviceToken')) {
          _this.regDevice();
        }
      },
      mounted: function () {},
      methods: {
        watchModel: function () {
          if (this.mobile == '' || this.password == '' || this.code == '') {
            this.isDisabled = true;
          } else {
            this.isDisabled = false;
          }
        },
        // 后退
        goback: function () {
          api.closeWin();
        },

        goLogin: function () {
          api.openWin({
            name: 'login',
            url: 'login.html',
            slidBackEnabled: false
          });
        },

        ctimer: function (time) {
          var t = time;
          var that = this;
          if (t > 0) {
            that.disabled = true;
            that.verifyCodeBtnText = t + '秒';
            t--;
            setTimeout(function () {
              that.ctimer(t);
            }, 1000);
          } else {
            that.disabled = false;
            that.verifyCodeBtnText = '获取验证码';
          }
        },

        sendSMS: function () {
          var _this = this;
          var regex = /^(?=\d{11}$)^1(?:3\d|4[57]|5[^4\D]|66|7[^249\D]|8\d|9[89])\d{8}$/g;
          if (_this.mobile == '') {
            api.toast({
              msg: '手机号码不能为空',
              duration: 2000,
              location: 'bottom'
            });
            return false;
          }
          if (!regex.test(_this.mobile)) {
            api.toast({
              msg: '请输入正确的手机号码',
              duration: 2000,
              location: 'bottom'
            });
            return false;
          }
          api.showProgress({
            title: '',
            text: '正在发送验证码...'
          });
          api.ajax({
            url: baseUrl + 'oauth/regsms',
            method: 'post',
            headers: {
              token: $api.getStorage('deviceToken')
            },
            data: {
              values: {
                mobile: _this.mobile,
              },
            }
          }, function (ret, err) {
            api.hideProgress();
            if (ret) {
              api.toast({
                msg: ret.message[0]
              });
              if (ret.status == 200) {
                _this.ctimer(60);
              }
            }
            if (err) {
              api.toast({
                msg: '网络错误，请稍后再试'
              });
            }
          });
        },

        register: function () {
          var _this = this;
          var regex = /^(?=\d{11}$)^1(?:3\d|4[57]|5[^4\D]|66|7[^249\D]|8\d|9[89])\d{8}$/g;
          if (_this.mobile == '') {
            api.toast({
              msg: '手机号码不能为空',
              duration: 2000,
              location: 'bottom'
            });
            return false;
          }
          if (!regex.test(_this.mobile)) {
            api.toast({
              msg: '请输入正确的手机号码',
              duration: 2000,
              location: 'bottom'
            });
            return false;
          }
          if (_this.password == '') {
            api.toast({
              msg: '密码不能为空',
              duration: 2000,
              location: 'bottom'
            });
            return false;
          }
          if (_this.code == '') {
            api.toast({
              msg: '验证码不能为空',
              duration: 2000,
              location: 'bottom'
            });
            return false;
          }
          if (!_this.show_invit_code) {
            _this.invit_code = $api.getStorage('tuid');
          }
          api.showProgress({
            title: '',
            text: '正在提交...'
          });
          api.ajax({
            url: baseUrl + 'oauth/microapp',
            method: 'post',
            headers: {
              token: $api.getStorage('deviceToken')
            },
            data: {
              values: {
                mobile: _this.mobile,
                password: _this.password,
                code: _this.code,
              },
            }
          }, function (ret, err) {
            api.hideProgress();
            if (ret) {
              if (ret.status == 200) {
                api.openWin({
                  name: 'register1',
                  url: 'register1.html',
                  slidBackEnabled: false,
                  pageParam: {
                    mobile: _this.mobile,
                    password: _this.password,
                    code: _this.code,
                    invit_code: _this.invit_code,
                  }
                });
              } else {
                api.toast({
                  msg: ret.message[0]
                });
              }
            }
            if (err) {
              api.toast({
                msg: '网络错误，请稍后再试'
              });
            }
          });
        },

        openProtocol: function () {
          api.openWin({
            name: 'protocol',
            url: 'protocol.html',
            bounces: false,
            pageParam: {
              key: 'value'
            }
          });
        }
      },
      watch: {
        'mobile': function () {
          this.watchModel()
        },
        'password': function () {
          this.watchModel()
        },
        'code': function () {
          this.watchModel()
        },

      }
    })
  }
</script>